<template>
    <el-card class="box-card">
        <el-row>
            <el-col :span="5">
                <el-input v-model="searchVal" placeholder="Please input" @change="Search" />
            </el-col>
            <el-col :span="12">
                <el-button type="primary" @click="Search">查询</el-button>
                <el-button type="primary" @click="open">新增</el-button>
                <el-button type="primary" @click="openSet">分配角色</el-button>
            </el-col>
        </el-row>
        <br>
        <el-row>
            <el-col>
                <el-table @selection-change="handleSelectionChange" :data="tableData" style="width: 100%; height: 65vh;"
                    border row-key="Id" ref="tb">
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" label="序号" width="70" />
                    <el-table-column prop="UserName" label="名称" width="180" />
                    <el-table-column prop="NickName" label="昵称" width="180" />
                    <el-table-column prop="image" label="头像" width="100">
                        <template #default="scope">
                            <el-image style="width: 50px; height: 40px" :src="scope.row.Image" :alt="scope.row.UserName"
                                :zoom-rate="1" :initial-index="4" fit="scale-down" :preview-teleported="true" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="IsEnable" label="是否启用">
                        <template #default="scope">
                            <el-switch v-model="scope.row.IsEnable" disabled />
                        </template>
                    </el-table-column>
                    <el-table-column prop="CreateDate" label="创建时间" width="180" />
                    <el-table-column prop="Description" label="描述" />
                    <el-table-column lable="Operations" align="center">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.row)">Edit</el-button>
                            <el-button size="small" type="danger" @click="handleDel(scope.row)">Delete</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination style="margin-top: 20px;" v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[5, 10, 30, 50]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </el-col>
        </el-row>
    </el-card>
    <Add :isShow="isShow" :info="info" @closeAdd="closeAdd" @success="success"></Add>
    <Setting :isShow="dialogFormVisible" :uid="uid" @closeSetting="closeSetting" @saveSetting=saveSetting></Setting>
</template>
  
<script lang="ts" setup>
import { Ref, onMounted, ref } from 'vue'
import { getUsers, delUser } from '../../../http/index'
import Add from './Add.vue'
import Setting from './UserSetting.vue'
import User from '../../../class/User';
import { ElMessage, ElTable, ElMessageBox } from 'element-plus';
const tableData: Ref<Array<User>> = ref<Array<User>>([])
const searchVal = ref('')
const currentPage = ref(1) //前往多少页
const pageSize = ref(5) //默认页数大小
const totalCount = ref(0)
const small = ref(false)
const disabled = ref(false)
const background = ref(true)
const Search = async () => {
    await load()
}
const parms = ref({
    UserName: "",
    UserType: 0,
    Description: "",
    PageIndex: currentPage.value,
    PageSize: pageSize.value
})
const load = async () => {
    parms.value.UserName = searchVal.value
    let res = await getUsers(parms.value) as any
    tableData.value = res.Data
    totalCount.value = res.Total
}
onMounted(async () => { await load() })
const handleSizeChange = async (val: number) => {
    await load()
    console.log(`${val} items per page`)
}
const handleCurrentChange = async (val: number) => {
    await load()
    console.log(`current page: ${val}`)
}
//===========新增/修改/删除逻辑=========
const isShow = ref(false)
const info: Ref<User> = ref<User>(new User())
const open = () => {
    isShow.value = true
}
const closeAdd = () => {
    isShow.value = false
    info.value = new User()
}
const handleEdit = (row: User) => {
    info.value = row
    isShow.value = true
}
const success = async (message: string) => {
    await load()
    isShow.value = false
    info.value = new User()
    ElMessage.success(message)
}
const handleDel = async (row: User) => {
    ElMessageBox.confirm("确认要删除这条数据吗？", "删除提示", {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
    }).then(async () => {
        var res = await delUser(row.Id)
        await load()
        if (res) {
            await load()
            ElMessage({ type: 'success', message: '删除成功！' })
        } else {
            ElMessage({ type: 'error', message: '删除失败!' })
        }
    }).catch(() => { })
}
const handleSelectionChange = (val: any) => {
    uid.value = val.map((item: User) => item.Id)
}
//=========设置角色逻辑=============
const dialogFormVisible = ref(false)
const uid = ref("")
const tb = ref<InstanceType<typeof ElTable>>()
const openSet = () => {
    let rows = tb.value?.getSelectionRows()
    if (rows.length == 0) {
        ElMessage.warning("请选择一个需要分配的用户")
    } else if (rows.length > 1) {
        ElMessage.warning("请选择【一个】用户进些分配")
    } else {
        dialogFormVisible.value = true
    }
}
const closeSetting = () => {
    dialogFormVisible.value = false
    uid.value = ""
}
const saveSetting = async () => {
    await load()
    uid.value = ""
    dialogFormVisible.value = false
}
</script>
  